<template>
  <div class="subscribe-back" style="position: relative; width: 100%">
    <div class="subscribe-back-content" @click="goBack">
      <i></i>
      <span>返回</span>
    </div>
  </div>
  <div class="kids-page">
    <h1>我们为什么要生孩子？</h1>
    <p>
      生孩子是一个复杂且因人而异的话题。从情感层面来看，孩子是爱情的结晶，能让夫妻之间的感情更加深厚，为家庭带来新的活力和希望。当一个新生命诞生，家庭中充满了欢声笑语，那种温馨的氛围是无法用言语来形容的。孩子的成长过程也是父母见证奇迹的过程，从他们第一次微笑、第一次走路、第一次说话，每一个瞬间都充满了惊喜和感动。
    </p>
    <p>
      从社会层面来说，孩子是社会的未来。他们承载着人类文明的传承和发展，为社会注入新的血液和创造力。每一代人都在前人的基础上不断进步，孩子们将带着我们的期望和梦想，继续探索未知的世界，推动社会的进步和发展。
    </p>
    <p>
      此外，生孩子也是一种自我成长和完善的过程。在照顾孩子的过程中，父母需要学会承担责任、关爱他人、耐心和包容。这些经历将使父母变得更加成熟和坚强，也让他们更加珍惜生活中的点点滴滴。当然，生孩子也意味着要面对许多挑战和困难，如经济压力、教育问题等，但正是这些挑战让我们更加深刻地体会到生活的意义和价值。
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const goBack = () => {
      router.push("/home");
    };
    return {
      goBack,
    };
  },
});
</script>

<style scoped>
.kids-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.kids-page h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  color: #222;
}

.kids-page p {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: justify;
}

/* 返回 */
.subscribe-back {
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 1px 0 0 #edf0f2;
  height: 60px;
  line-height: 60px;
  position: relative;
  z-index: 1;
}

.subscribe-back-content {
  cursor: pointer;
  display: inline-block;
  height: 60px;
}

.subscribe-back-content > i {
  background: url()
    no-repeat;
  background-size: contain;
  display: inline-block;
  height: 17px;
  margin-left: 30px;
  vertical-align: middle;
  width: 17px;
}

.subscribe-back-content > span {
  color: #5c6166;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
</style>
